<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页头部</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{background:#FFF;}
        .searchHead{
          padding:0.2rem 0.35rem;
        }
        .searchHead .search{
          background:#F0F5FB;
          height:0.7rem;
          line-height:0.4rem;
          padding:0.15rem 0.3rem;
          border-radius:3rem;
          text-align:center;
          font-size:0.29rem;
          float:left;
          width:87%;
        }
        .searchHead .search::-webkit-input-placeholder {
          color: #C4C4C4;
        }
        .searchHead .cancel{
          float:left;
          height:0.7rem;
          line-height:0.7rem;
          width:13%;
          text-align:right;
          font-size:0.29rem;
          color:#515151;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="header">
            <form class="searchHead clearfix" onsubmit="return false;">
                <input type="search" placeholder="请输入关键词" class="search" v-model="word" @keyup.enter="enterSearch" />
                <span class="cancel" @click="close()">取消</span>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    word:'',
                },
                methods:{
                    enterSearch(){
                        var that = this;
                        api.sendEvent({
                            name: 'searchKeyword',
                            extra: {
                                word:that.word
                            }
                        });
                        document.querySelector(".search").blur();
                    },
                    close(){
                        var that = this;
                        api.closeWin({
                            animation:{
                                type:"fade",                //动画类型（详见动画类型常量）
                                subType:"from_top",       //动画子类型（详见动画子类型常量）
                                duration:200
                            }
                        });
                    }
                },
                mounted(){
					$.initJs(this);
                    setTimeout(function(){
                        document.querySelector(".search").focus();
                    },200);
                }
            });

            api.openFrame({
                name: api.pageParam.page,
                url: 'widget://html/content/' + api.pageParam.page + '.html',
                softInputBarEnabled:api.pageParam.data.softInputBarEnabled || false,
                softInputDismissMode:api.pageParam.data.softInputDismissMode || ['tap','drag'],
                pageParam: {
                    data:api.pageParam.data,
                    load:false,
                },
                useWKWebView:true,
                bgColor: "#FFF",
                rect: $.rect()
            });
        }
    </script>
</body>
</html>
